<template>
  <div class="dashboard-container">
    <h2>作用域插槽</h2>
    <hr>
    <showName first-name="tom" last-name="Green" />
    <showName first-name="泽" last-name="王">
      <template v-slot="{info}">
        {{ info.lname+""+info.fname }}
      </template>
    </showName>
    <hr>
    <el-table :data="list">
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="年龄" prop="age" />
      <el-table-column label="性别" prop="gender" />
    </el-table>
    <show-tree :data="list">
      <template v-slot="scope">
        {{ scope.data.name }}
      </template>
    </show-tree>
  </div>
</template>

<script>
import ShowName from './components/showName.vue'
import ShowTree from './components/showTree.vue'
export default {
  name: 'Dashboard',
  components: {
    ShowName,
    ShowTree
  }
}
</script>

<style lang="scss" scoped>
</style>
